<template>
    <div id="app">
        <!--左侧-->
        <div class="left-part" v-if="settingInit" :class="{packup:menuPackup}">
            <!--拖动区域-->
            <div class="drag"></div>
            <!--logo-->
            <div class="logo">
                <img class="normal" src="./assets/logo.png" width="1" />
                <tips :tip="softname" direction="right" class="tips">
                    <img class="small" src="./assets/logo-icon.png" width="1" />
                </tips>
            </div>

            <!--菜单收起按钮-->
            <div class="menu-packup" @click="setMenuPackup(true)">
                <tips :tip="`收起菜单`" direction="right" class="tips">
                    <i class="appfont app-back_android"></i>
                </tips>
            </div>

            <!--菜单展开按钮-->
            <div class="menu-unpackup">
                <tips :tip="`展开菜单`" direction="right" class="tips">
                    <div class="btn" @click="setMenuPackup(false)">
                        <i class="appfont app-right"></i>
                    </div>
                </tips>
            </div>

            <!--菜单-->
            <div class="menu">
                <dl>
                    <dd v-for="(v, i) in menu" :key="i" :class="{separator:v.separator}">
                        <div v-if="!v.separator" class="button">
                            <tips :tip="menuPackup ? v.title : ''" direction="right" class="tips">
                                <router-link
                                    draggable="false"
                                    class="link"
                                    :class="{active:menuActive === i}"
                                    :to="v.to">
                                    <i :class="v.icon"></i>
                                    <span>{{ v.title }}</span>
                                </router-link>
                            </tips>
                        </div>
                    </dd>
                </dl>
            </div>
            <!--设置-->
            <div class="settingBox" v-if="settingShow">
                <div class="title">窗口透明度</div>
                <div class="btns">
                    <div v-for="(v,k) in opacitys" :key="k" class="btn" :class="{active: opacity == v}" @click="settingOpacity(v)">{{ v }}%</div>
                </div>
                <div class="title">设置显隐键</div>
                <div class="setBossKey">
                    <input type="text" @keyup="inputBossKey" @blur="setBossKey" v-model="bossKeyTmp" />
                </div>
                <div class="checkUpdate" :class="{active:checkUpdate}" @click="setCheckUpdate">
                    <span>自动检测更新</span>
                    <i class="icon appfont app-check"></i>
                </div>
            </div>
            <!--显隐键-->
            <div class="bossKey" @click="settingShow = !settingShow">
                <span>显隐键&nbsp;{{ bossKey }}</span>
            </div>
            <!--版本信息-->
            <div class="version">
                <tips :tip="`版本号 ${version}`">{{ version }}</tips>
            </div>
            <!--设置-->
            <div class="setting" :class="{active:settingShow}" @click="settingShow = !settingShow">
                <tips :tip="`设置`" class="tips">
                    <i class="icon appfont app-setting"></i>
                </tips>
            </div>
        </div>
        <!--右侧-->
        <div class="right-part">
            <!--窗口控制-->
            <div class="controls">
                <!--最小化-->
                <div @click="$windowControl.minimize()" class="minimize appfont app-minimize"></div>
                <!--还原-->
                <div v-if="isMaximized" @click="$windowControl.unmaximize()" class="resume appfont app-resume"></div>
                <!--最大化-->
                <div v-if="!isMaximized" @click="$windowControl.maximize()" class="maximize appfont app-maximize"></div>
                <!--关闭-->
                <div @click="$windowControl.close()" class="close appfont app-close"></div>
            </div>
            <!--主体-->
            <div class="body-part">
                <router-view />
            </div>
        </div>
        <!--更新器-->
        <updaterBox ref="updaterBox" />
    </div>
</template>

<script>
import { configs, version, appName } from '../../package.json';
import { mapGetters, mapActions } from 'vuex';

import updaterBox from './components/globals/updaterBox';
import combinationKey from './import/combinationKey';
import IPC from './electron/ipc/dict';
import kit from './electron/helper/kit';
import is from './electron/helper/is';

/*别名*/
const IPC_WINDOW_CONTROL = IPC.IPC_WINDOW_CONTROL;

export default {
    name      : 'App',
    components: {
        updaterBox
    },
    data () {
        return {
            /*设置获取成功*/
            settingInit: false,

            /*软件名称*/
            softname: `${appName}`,

            /*版本号*/
            version: `v${version} ${configs.electron.arch}位`,

            /*菜单收起*/
            menuPackup: false,

            /*生效中的显隐键*/
            bossKey: configs.bossKey,

            /*尝试设置的显隐键*/
            bossKeyTmp: configs.bossKey,

            /*记录最后设置的有效显隐键*/
            bossKeyLast: configs.bossKey,

            /*设置面板*/
            settingShow: false,

            /*设置面板*/
            opacity: 100,

            /*透明选项，建议4个*/
            opacitys: [70, 80, 90, 95, 100],

            /*是否自动检查更新*/
            checkUpdate: true,

            /*窗口最大化状态*/
            isMaximized: false
        };
    },
    computed: {
        ...mapGetters({
            /*app配置*/
            'appSetting': 'setting/setting',

            /*菜单*/
            'menu'      : 'menu/lists',
            'getMenu'   : 'menu/getMenu',
            'menuActive': 'menu/activeIndex'
        })
    },
    watch   : {
        /*监控app设置更新*/
        appSetting: {
            deep: true,
            handler ({ opacity, bossKey, checkUpdate, menuPackup }) {
                this.settingInit = true;
                is.undf(opacity) || (this.opacity = opacity);
                is.undf(checkUpdate) || (this.checkUpdate = checkUpdate);
                is.undf(menuPackup) || (this.menuPackup = menuPackup);
                is.undf(bossKey) || (this.bossKey = bossKey);
                is.undf(bossKey) || (this.bossKeyTmp = bossKey);
                is.undf(bossKey) || (this.bossKeyLast = bossKey);
            }
        }
    },
    mounted () {
        /*设置默认标题*/
        document.title = appName;

        /*监听窗口是否最大化*/
        ipcRenderer.on(IPC_WINDOW_CONTROL.IS_MAXIMIZED, (e, status) => this.isMaximized = status);

        /*监听主进程配置通知*/
        /*仅需要在此组件监听，收到通知随即更新vuex，其他组件用 computed 配合 watch 监听 vux 数据变化后进行操作*/
        this.listeningAppSetting();
    },
    methods: {
        /*更新全局设置*/
        ...mapActions({
            updateSetting: 'setting/update'
        }),

        /*监听主进程配置通知*/
        listeningAppSetting () {
            /*监听app设置获取通知*/
            this.$settingManager.listenSetting(setting => {
                /*特殊处理，WIN快捷键重命名*/
                combinationKey.super2win(setting.bossKey);

                /*检测更新*/
                this.$refs.updaterBox.checkUpdate(setting.checkUpdate);

                /*更新store*/
                this.updateSetting(setting);
            });

            /*监听异步设置结果*/
            this.$settingManager.listenSettingUpdate(({ errCode, errMsg }) => (errCode === 0) || this.$messageWarning(errMsg));
        },

        /*展开收起左侧菜单*/
        setMenuPackup (packup) {
            this.menuPackup = packup;
            this.hideSettingPanel();
            this.$settingManager.update({ menuPackup: packup });
        },

        /*输入显隐键*/
        inputBossKey (e) {
            /*清空输入框则使用初始设置快捷键*/
            if (!this.bossKeyTmp) {
                this.bossKeyTmp = this.bossKey;
                return;
            }

            /*捕捉组合键*/
            let catchKey = combinationKey.watch(e);

            /*记录有效组合键*/
            if (catchKey) this.bossKeyLast = catchKey;

            /*输入无效字符时，使用最后一次尝试设置的组合键（清理无效输入）*/
            this.bossKeyTmp = combinationKey.super2win(catchKey || this.bossKeyLast);
        },

        /*设置显隐键*/
        setBossKey () {
            let bossKey = combinationKey.win2super(this.bossKeyTmp || this.bossKey);
            this.$settingManager.update({ bossKey });
            this.hideSettingPanel();
        },

        /*设置自动更新*/
        setCheckUpdate () {
            const checkUpdate = !this.checkUpdate;
            this.$settingManager.update({ checkUpdate });
            this.hideSettingPanel();
        },

        /*设置窗口透明度*/
        settingOpacity (opacity) {
            /*设置app透明度*/
            this.$settingManager.update({ opacity: kit.toInt(opacity) });
            this.hideSettingPanel();
        },

        /*隐藏设备面板*/
        hideSettingPanel () {
            this.settingShow = false;
        }
    }
};
</script>

<style lang="less">
@import "./assets/css/reset.less";
@import "./assets/css/app.less";
@import "./assets/css/body.less";
</style>
